<template>
    <div class="tab-container waybill-tab-container tab-fixed">
        <el-card shadow="never">
            <el-row :gutter="6">
                <span>合单备注</span>
            </el-row>
        </el-card>
        <el-card shadow="never">
            <el-row :gutter="6">
                <el-form
                        ref="searchOrderForm"
                        :model="searchOrderData"
                        size="mini"
                        label-width="60px"
                >
                    <el-col :span="4">
                        <el-form-item label="渠道" prop="inStockChannel">
                            <el-select
                                    v-model="searchOrderData.inStockChannel"
                                    placeholder="请选择下拉选择渠道"
                                    multiple
                                    clearable
                                    :style="{ width: '100%' }"
                            >
                                <el-option
                                        v-for="(k, v) in inStockChannelOptions"
                                        :key="v"
                                        :label="v"
                                        :value="parseInt(k)"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="合单号" prop="waybillMergeNo">
                            <el-input
                                    v-model="searchOrderData.waybillMergeNo"
                                    placeholder="请输入合单号"
                                    clearable
                                    :style="{ width: '100%' }"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="派送方式" prop="trackNumber">
                            <el-input
                                    v-model="searchOrderData.trackNumber"
                                    placeholder="请输入派送方式"
                                    clearable
                                    :style="{ width: '100%' }"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="客户" prop="customerShortName ">
                            <el-input
                                    v-model="searchOrderData.customerShortName"
                                    placeholder="请输入客户"
                                    clearable
                                    :style="{ width: '100%' }"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="销售" prop="salesmanId">
                            <el-select
                                    v-model="searchOrderData.salesmanId"
                                    placeholder="请选择销售"
                                    clearable
                                    :style="{ width: '100%' }"
                            >
                                <el-option
                                        v-for="(k, v) in userOptions"
                                        :key="v"
                                        :label="userOptions[v]"
                                        :value="parseInt(v)"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="客服" prop="servicesId">
                            <el-select
                                    v-model="searchOrderData.servicesId"
                                    placeholder="请选择客服"
                                    clearable
                                    :style="{ width: '100%' }"
                            >
                                <el-option
                                        v-for="(k, v) in userOptions"
                                        :key="v"
                                        :label="userOptions[v]"
                                        :value="parseInt(v)"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="运单号" prop="waybillNos">
                            <el-input
                                    v-model="searchOrderData.waybillNos"
                                    type="textarea"
                                    placeholder="请输入运单号"
                                    :autosize="{ minRows: 1, maxRows: 6 }"
                                    :style="{ width: '100%' }"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="仓库代码" prop="dispatchAddressCode">
                            <el-input
                                    v-model="searchOrderData.dispatchAddressCode"
                                    placeholder="请输入仓库代码"
                                    clearable
                                    :style="{ width: '100%' }"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <el-button
                                    type="primary"
                                    icon="el-icon-search"
                                    size="mini"
                                    @click="initWaybillPageData"
                            >
                                搜索
                            </el-button>
                            <el-button type="primary" size="mini" @click="reset">
                                重置
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </el-card>
        <el-card shadow="never">
            <el-row :gutter="2">
                <el-form
                        ref="saveRemarkForm"
                        :model="saveRemarkData"
                        size="mini"
                        label-width="100px"
                >
                    <el-col :span="8" style="">
                        <el-form-item label="" prop="sysRemark">
                            <el-input
                                    v-model="saveRemarkData.sysRemark"
                                    placeholder="系统内部备注"
                                    clearable
                                    :style="{ width: '100%' }"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="是否发送通知:">
                            <template>
                                <el-checkbox-group
                                        v-model="saveRemarkData.receiveType"
                                        size="medium"
                                >
                                    <el-checkbox label="0">销售</el-checkbox>
                                    <el-checkbox label="1">客服</el-checkbox>
                                </el-checkbox-group>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="是否同步到轨迹:" prop="synTrace">
                            <el-radio-group v-model="saveRemarkData.synTrace" size="medium">
                                <el-radio
                                        v-for="(item, index) in synTraceOptions"
                                        :key="index"
                                        :label="item.value"
                                        :disabled="item.disabled"
                                >{{ item.label }}
                                </el-radio
                                >
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="消息类型:" prop="urgencytype">
                            <el-radio-group v-model="saveRemarkData.urgencytype" size="medium">
                                <el-radio
                                        v-for="(item, index) in urgencytypeOptions"
                                        :key="index"
                                        :label="item.value"
                                        :disabled="item.disabled"
                                >{{ item.label }}
                                </el-radio
                                >
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="" prop="field105">
                            <el-button type="primary" size="mini" @click="saveSysRemark()">
                                保存备注
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </el-card>
        <el-card shadow="never">
            <!--显示查询数据-->
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="30"></el-table-column>
                <el-table-column prop="waybillNo" label="运单号" width="180">
                </el-table-column>
                <el-table-column prop="waybillMergeNo" label="合单号" width="180">
                </el-table-column>
                <el-table-column prop="inStockTotalPackages" label="件数" width="180">
                </el-table-column>
                <el-table-column prop="inStockChannelName" label="渠道" width="180">
                </el-table-column>
                <el-table-column prop="dispatchAddressCode" label="仓库代码" width="180">
                </el-table-column>
                <el-table-column prop="trackNumber" label="派送方式" width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.trackNumber === null">卡车派送</span>
                    </template>
                </el-table-column>
                <el-table-column prop="customerId" label="客户名称">
                    <template slot-scope="scope">
                        {{ customerOptions[scope.row.customerId] }}
                    </template>
                </el-table-column>
                <el-table-column prop="salesmanId" label="销售" width="180">
                    <template slot-scope="scope">
                        {{ userOptions[scope.row.salesmanId] }}
                    </template>
                </el-table-column>
                <el-table-column prop="servicesId" label="客服" width="180">
                    <template slot-scope="scope">
                        {{ userOptions[scope.row.servicesId] }}
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
    import {ajax} from "@/store/yg/common/utils";
    import * as constant from "@/store/yg/common/constant";
    import axios from "axios";

    export default {
        props: ["row", "data", "more"],
        data() {
            return {
                //展示的数据
                tableData: [
                    {
                        id: "",
                        waybillNo: "",
                        waybillMergeNo: "",
                        inStockTotalPackages: "",
                        inStockChannelName: "",
                        dispatchAddressCode: "",
                        trackNumber: "",
                        customerId: "",
                        salesmanId: "",
                        servicesId: "", //系统备注
                    }
                ],
                //查询表单
                searchOrderData: {
                    inStockChannel: [],
                    waybillMergeNo: "",
                    trackNumber: "",
                    customerShortName: "",
                    salesmanId: "",
                    servicesId: "",
                    waybillNos: null,
                    dispatchAddressCode: "",
                },
                //保存分配的 备注 提交表单
                saveRemarkData: {
                    waybillLoadId: "",
                    sysRemark: "",
                    synTrace: 0,
                    waybillArray: [],
                    receiveType: [],
                    urgencytype: 2,
                },
                optionsData: {},
                customerOptions: {},
                inStockChannelOptions: {},
                userOptions: {},
                //选择的数据
                multipleSelection: [],
                //选择的 下拉 的 id
                selectWaybillIds: [],
                receiveTypeOptions: [
                    {
                        label: "销售",
                        value: 0
                    },
                    {
                        label: "客服",
                        value: 1
                    }
                ],
                synTraceOptions: [
                    {
                        label: "否",
                        value: 0
                    },
                    {
                        label: "是",
                        value: 1
                    }
                ],
                urgencytypeOptions: [
                    {
                        label: "红",
                        value: 0
                    },
                    {
                        label: "黄",
                        value: 1
                    },
                    {
                        label: "灰",
                        value: 2
                    }
                ]
            };
        },
        computed: {},
        watch: {},
        created() {
        },
        saveRemarkForm: {
            sysRemark: ""
        },
        mounted() {
            this.initCustomerOptions("customerSource");
            this.initUserOptions("userSource");
            this.initChannelOptions("customerChannelSource");
            this.initWaybillPageData();
        },
        methods: {
            //下拉数据
            handleSelectionChange(val) {
                this.selectWaybillIds = [];
                for (let i = 0; i < val.length; i++) {
                    const id = val[i].id;
                    this.selectWaybillIds.push(id);
                }
                this.multipleSelection = val;
            },
            //重置按钮
            reset() {
                this.searchOrderData = {};
                //重新获取所以数据
                this.initWaybillPageData();
            },
            initCustomerOptions(bean) {
                var uri = "/api/entry/source?bean=" + bean;
                axios.post(constant.API_SERVER + uri).then(
                    response => {
                        this.customerOptions = response.data;
                    },
                    error => {
                        console.info(error);
                    }
                );
            },
            initUserOptions(bean) {
                var uri = "/api/entry/source?bean=" + bean;
                axios.post(constant.API_SERVER + uri).then(
                    response => {
                        this.userOptions = response.data;
                    },
                    error => {
                        console.info(error);
                    }
                );
            },
            initChannelOptions(bean) {
                var uri = "/api/entry/source?bean=" + bean;
                axios.post(constant.API_SERVER + uri).then(
                    response => {
                        this.inStockChannelOptions = response.data;
                    },
                    error => {
                        console.info(error);
                    }
                );
            },
            //保存装车合单备注
            saveSysRemark() {
                console.log("this.selectWaybillIds", this.selectWaybillIds)
                if (null == this.selectWaybillIds || this.selectWaybillIds.length == 0) {
                    this.$message.error("请选择分配的订单");
                    return;
                }
                if (null == this.saveRemarkData.sysRemark || "" == this.saveRemarkData.sysRemark) {
                    this.$message.error("请填写备注信息");
                    return;
                }
                this.saveRemarkData.waybillLoadId = this.$route.query.pid;
                this.saveRemarkData.waybillArray = this.selectWaybillIds;
                ajax("allocationLoadSysRemark", this.saveRemarkData).then(
                    res => {
                        if (res.code != 200) {
                            if (res.message) {
                                this.$message.error(res.message);
                            } else {
                                this.$message.error("程序异常");
                            }
                        } else {
                            this.$message.success("成功");
                        }
                    },
                    error => {
                        this.$message.error("程序异常");
                    }
                );
            },
            getFindKey(value, obj, me) {
                let objlist = JSON.parse(JSON.stringify(obj));
                delete objlist.me;
                let findKey = (value, compare = (a, b) => a === b) => {
                    return Object.keys(objlist).find(k => compare(objlist[k], value));
                };
                return findKey(value);
            },
            //初始化的方法
            initWaybillPageData() {
                this.searchOrderData.waybillId = this.$route.query.pid;
                ajax("waybillLoadMergeSysRemark", this.searchOrderData).then(
                    res => {
                        if (res.code != 200) {
                            if (res.message) {
                                this.$message.error(res.message);
                            } else {
                                this.$message.error("程序异常");
                            }
                        } else {
                            this.tableData = res.data;
                        }
                    },
                    error => {
                        this.$message.error("程序异常");
                    }
                );
            }
        }
    };
</script>
<style lang="scss" scoped>
    .title-icon {
        display: inline-block;
        width: 120px;
    }
</style>

<style scoped>
    .el-card {
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }

    /deep/ .el-tabs__item.is-disabled {
        color: #51abd1;
    }
</style>
